Code Playground

<figure class="polaroid">
		<img src="https://images.unsplash.com/photo-1501426026826-31c667bdf23d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTA5OTE2ODF8&ixlib=rb-4.0.3&q=80&w=400" alt="A pink flamingo floater toy floating on ocean water." title="Photo by Vicko Mozara for Unsplash">
		<figcaption>Drifting on dreams with a pink flamingo companion.</figcaption>
	</figure>
	<p>Gentle breezes carry the salty scent of adventure, inviting us to dance with the foamy tides.</p>

<div class="stitch">
		<p>Embrace the rush of adrenaline as the surfer conquers the majestic waves, painting a masterpiece of motion.</p>
	</div>

<figure class="polaroid">
		<img src="https://images.unsplash.com/photo-1614094723471-ed6e2cf28cad?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTA5OTIwMDl8&ixlib=rb-4.0.3&q=80&w=400" alt="A person surfing in dark blue water. In the background, there is a brown stony cliff." title="Photo by Harrison Fitts for Unsplash">
		<figcaption>Riding the rhythm of the sea's melody.</figcaption>
	</figure>

<p>As twilight descends, a beach bonfire illuminates the night, casting dancing shadows beneath a starlit sky.</p>
	<div class="polaroid-group">
		<figure class="polaroid">
			<img src="https://images.unsplash.com/photo-1596326270763-87f26e0f9225?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTA5OTIxNzJ8&ixlib=rb-4.0.3&q=80&w=400" alt="A large group of people gathered around a beach bonfire at dusk." title="Photo by Emily Hoehenrieder for Unsplash.">
			<figcaption>Stories whispered in the crackling embrace of a beach bonfire.</figcaption>
		</figure>

<figure class="polaroid">
			<img src="https://images.unsplash.com/photo-1625723347040-0fdf78cb3c1e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTA5OTI0NDB8&ixlib=rb-4.0.3&q=80&w=400" alt="People sitting on the beach at night with an astonishing view of the milky way." title="Photo by Izuddin Helmi Adnan for Unsplash. ">
			<figcaption>Nighttime beach escapades under a cosmic tapestry.</figcaption>
		</figure>
	</div>

<p>Under the cosmic canvas, stargazers recline on the sands, embraced by the Milky Way's celestial dance.</p>
	<p>From the airplane window, the setting sun paints a breathtaking tableau over billowing clouds, a masterpiece in the sky.</p>

<figure class="polaroid">
		<img src="https://images.unsplash.com/photo-1594937113195-27f8b9046013?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTA5OTI2MTh8&ixlib=rb-4.0.3&q=80&w=400" alt="Airplane window view from behind the wing. The sun is setting, casting a golden glow over a field of fluffy white clouds." title="Photo by Jim Flores for Unsplash. ">
		<figcaption>Chasing sunsets from the sky, painting clouds with hues of gold.</figcaption>
	</figure>

<p>Beneath the endless sky, moments of joy and laughter imprint memories in the sands of time.</p>

<p>Summer's embrace is a timeless journey where waves and dreams merge into a symphony of bliss.</p>
</article>

<div class="footer">
		Made with ❤️ by Marcus | Visit <a href="https://shopblocks.com" target="_blank">Shopblocks</a>
	</div>

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Dancing+Script&family=Indie+Flower&family=Patrick+Hand&family=Caveat&family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
body {
  background-image: url("https://images.unsplash.com/photo-1616410731303-6affae095a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1901&q=80");
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
}

.scrapbook {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0 auto;
  padding: 15px;
  column-count: 2;
  column-gap: 22px;
  max-width: 1200px;
}

.scrapbook h1 {
  font-size: 28px;
  margin-bottom: 10px;
  font-family: "Permanent Marker", cursive;
  padding: 10px 20px;
  background-color: #ffeecc;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  display: inline-block;
  transform: rotate(-2deg);
}

.scrapbook p {
  position: relative;
  padding: 10px;
  background-color: #ffeecc;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transform: rotate(2deg);
  font-family: Arial, sans-serif;
  font-size: 16px;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  max-width: 75% !important;
}

.random {
  transform: rotate(calc(-2deg + 4deg * var(--rotation))) !important;
  background-color: var(--bgcolor) !important;
  font-family: var(--font) !important;
  font-size: var(--fontsize) !important;
  white-space: pre-wrap !important;
}

.polaroid {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: rotate(var(--rotation, -4deg));
  margin-bottom: 20px;
}

.polaroid img {
  display: block;
  min-width: 100%;
  object-fit: cover;
  height: 345px;
  overflow: hidden;
}

.polaroid::before,
.polaroid::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 20px;
  background-color: #ccc;
  transform: rotate(45deg);
}

.polaroid::before {
  left: -3px;
  top: -10px;
}

.polaroid::after {
  right: -3px;
  top: -10px;
}

.polaroid figcaption {
  font-family: "Permanent Marker", cursive;
  font-size: 18px;
  margin-top: 10px;
  color: #333;
}

.polaroid-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  max-width: 100%;
  /* Ensure the group does not exceed the width of the parent */
}

.polaroid-group .polaroid {
  width: 48%;
  /* Adjust the width as needed */
  transform: rotate(-2deg);
  /* Add a slight rotation for a more random appearance */
}

.polaroid-group .polaroid + .polaroid {
  transform: rotate(2deg);
  /* Opposite rotation for variety */
  margin-top: -20px;
  /* Add negative margin to create overlap */
}

.footer {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: black;
  font-size: 12px;
  text-align: right;
  font-family: monospace;
}

.footer a {
  color: black;
  text-decoration: none;
}

document.addEventListener("DOMContentLoaded", function () {
	const polaroids = document.querySelectorAll(".polaroid");
	polaroids.forEach((polaroid) => {
		const randomRotation = -2 + Math.random() * 4; // Rotate between -2deg and 2deg
		const randomTop = Math.random() * 2 + "vh"; // Random vertical position

polaroid.style.setProperty("--rotation", randomRotation + "deg");
		polaroid.style.top = randomTop;
	});

const fonts = [
		"Pacifico",
		"Dancing Script",
		"Indie Flower",
		"Patrick Hand",
		"Caveat",
		"Shadows Into Light"
	];
	const colors = ["#ffeecc", "#ffddaa", "#ddffee", "#ffccdd", "#ccffee"];

const paragraphs = document.querySelectorAll(".scrapbook p");
	paragraphs.forEach((p) => {
		const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
		const randomColor = colors[Math.floor(Math.random() * colors.length)];
		const randomRotation = -1 + Math.random() * 2; // Rotate between -1deg and 2deg
		const randomFontSize = 14 + Math.random() * 4; // Font size between 14px and 18px
		const randomWidth = 60 + Math.random() * 40 + "%"; // Width between 60% and 100%
		const randomLeft = Math.random() * 10 + "%"; // Left position between 0% and 10%

p.style.setProperty("--font", randomFont);
		p.style.setProperty("--bgcolor", randomColor);
		p.style.setProperty("--rotation", randomRotation);
		p.style.setProperty("--fontsize", randomFontSize + "px");
		p.style.width = randomWidth;
		p.style.left = randomLeft;
		p.classList.add("random");
	});
});

Frontend Forever App